<template>
  <div class="index">
    <van-search :value="value"
                @tap="toSearch"
                :disabled="true"
                placeholder="请输入搜索关键词"
                custom-class="customClass"
                field-class="fieldClass"
                input-class="inputClass"/>
    <div class="home">
      <swiper  v-if="bannerList.length > 0" class="swiper" :current="currentSwiper" indicator-active-color="#EF5A56" circular="true" indicator-color="#C7C7C7" :indicator-dots="true" :autoplay="true" :interval="5000" :duration="1000">
        <block v-for="(item, index) in bannerList" :index="index" :key="index">
          <swiper-item>
            <img :lazy-load="true"	:src="picPre + item.pic" @tap="goPage(item.url)" class="slide-image" mode="widthFix"/>
          </swiper-item>
        </block>
      </swiper>
      <div class="card-cell">
        <van-row>
          <van-col span="8" @tap="goPage('/movie/index')"><img class="image" src="/static/img/movie.png" alt="">
            <span class="title">影视学堂</span></van-col>
          <van-col span="8" @tap="goPage('/activity/index')"><img class="image" src="/static/img/active.png" alt="">
            <span class="title">活动专区</span>
          </van-col>
          <van-col span="8" @tap="goPage('/pages/about/index')"><img class="image" src="/static/img/about.png" alt="">
            <span class="title">关于我们</span>
          </van-col>
        </van-row>
      </div>
      <hot-comment :info="hot"></hot-comment>
      <tableCell title="项目推荐" url="/project/list?type=0"></tableCell>
      <div class="sy-recommend" ﻿@tap="goPage('/project/detail?id=' + recommend.id)">
        <div class="sy-recommend-img">
          <img :lazy-load="true" v-if="recommend.pic ? true : false" :src="picPre + recommend.pic" alt="" mode="widthFix">
          <div class="sy-recommend-img-font">荐</div>
          <p></p>
        </div>
        <div class="sy-recommend-content">
          <p>{{recommend.title}}</p>
          <p v-html="recommend.introduction" class="home-introduction">{{recommend.introduction}}</p>
          <div>
            <i class="iconfont" style="font-size: 24rpx">&#xe609;</i><p class="sy-recommend-actor">演员阵容：<span class="actor" v-for="(item,index) in recommend.actor_list" :key="index">{{item.name}}</span></p>
          </div>
          <div><i class="iconfont" style="font-size: 24rpx;margin-top: 14rpx;">&#xe606;</i><p class="sy-recommend-num">{{recommend.click_num}} 人关注</p></div>
        </div>
      </div>
      <card :list="pImages.slice(1)" :type="1"></card>
      <div class="line"></div>
      <tableCell title="娱乐资讯" url="/amusement/index"></tableCell>
      <div class="amusement">
        <amusement :info="item" v-for="(item, index) in aData" :key="index"></amusement>
      </div>
      <div class="line"></div>
      <tableCell title="票房排行" :more="false"></tableCell>
      <box-office :networkMovie="networkMovie" :active="active" ﻿@changeSwitch="changeSwitch"></box-office>
    </div>
  </div>
</template>

<script>
  import amusement from '@/components/home/amusement.vue'
  import tableCell from '@/components/tableCell/index'
  import boxOffice from '@/components/home/boxOffice'
  import hotComment from '@/components/home/hotComment'
  import card from '@/components/project/card'
  import { mapState } from 'vuex'
  export default {
    mpType: 'page',
    components: {
      amusement,
      tableCell,
      boxOffice,
      hotComment,
      card
    },
    data() {
      let that = this;
      return {
        picPre: that.$api.picPre,
        hot:[],
        value: '',
        bannerList: [],//banner
        recommend:{
			click_num: 0
		},// 项目推荐第一个
        pImages: [],// 项目推荐
        aData:[], //娱乐资讯
        networkMovie:[
		  {movieName:"诸国中烟花从此散诸国中烟花从此散",releaseInfo:"上映首日",sumBoxInfo:"9955.7万",boxInfo:"3760.96",boxRate:"22.3%",name:"烟花从此散",days:0,gdi:50},
		],
        loadingEnd:{
          moduleOne: false,
          moduleTwo: false,
          moduleThree: false,
          moduleFour: false,
          moduleFive: false,
        },
        currentSwiper: 0,
        boxOfficeLoading: false,//票房loading
		active: 1
      }
    },
    onPullDownRefresh(){
      this.getCatchMovie();
      this.viewLoad();
      ﻿uni.stopPullDownRefresh() //停止下拉刷新
    },
    methods: {
      goPage(url) {
		  console.log(url)
		  uni.navigateTo({
		  	url: url
		  })
      },
      search() {
      },
      toSearch(){
        uni.navigateTo({
        	url:'/social/homeSearchPage'
        })
      },
      cast(list){
        let actor = [];
        for(let item of list){
          actor.push(item.name);
        }
        actor = actor.join(",");
        return actor;
      },
      getBannerList() {
        this.$ajax
          .get(this.$api.getBannerList,{mid:1, page_size:5, page: 1})
          .then(res => {
            this.bannerList = res.data;
            this.currentSwiper = 0;
            this.loadingEnd.moduleOne = true;
          })
          .catch(err => {
            this.loadingEnd.moduleOne = true;
            ﻿uni.showToast({
              title: err,
              icon: 'none',
              duration: 2000
            })
          });
      },
      getHotComment(){
        this.$ajax
          .post(this.$api.hotGroup, {page_size:1})
          .then(res => {
            this.hot = res.data;
            this.loadingEnd.moduleFour = true;
          })
          .catch(err => {
            this.loadingEnd.moduleFour = true;
            ﻿uni.showToast({
              title: err,
              icon: 'none',
              duration: 2000
            })
          });
      },
      getProject(){
        this.$ajax
          .get(this.$api.getHomeProjectList,{page_size:7})
          .then(res => {
            this.pImages = res.data;
            this.recommend = this.pImages[0];
            this.loadingEnd.moduleTwo = true;
          })
          .catch(err => {
            this.loadingEnd.moduleTwo = true;
            ﻿uni.showToast({
              title: err,
              icon: 'none',
              duration: 2000
            })
          });
      },
      getInfoList(){
        this.$ajax
          .get(this.$api.getHomeInfoList,{is_recommend:1})
          .then(res => {
            this.aData = res;
            this.loadingEnd.moduleThree = true;
          })
          .catch(err => {
            this.loadingEnd.moduleThree = true;
            ﻿uni.showToast({
              title: err,
              icon: 'none',
              duration: 2000
            })
          });
      },
      getCatchMovie(){
        this.$ajax
          .post(this.$api.catchMovie)
          .then(res => {
            this.loadingEnd.moduleFive = true;
            this.networkMovie = res;
            if(this.boxOfficeLoading){
              this.boxOfficeLoading = false;
              setTimeout(function(){
                ﻿uni.hideLoading()
              }, 800);
            }
          })
          .catch(err => {
            this.loadingEnd.moduleFive = true;
            if(this.boxOfficeLoading){
              this.boxOfficeLoading = false;
              ﻿uni.hideLoading();
            }
            ﻿uni.showToast({
              title: err,
              icon: 'none',
              duration: 2000
            })
          });
      },
	  getInternetMovie(){
		  this.$ajax
		    .post(this.$api.catchInternetMovie)
		    .then(res => {
				console.log(res)
		      this.networkMovie = res;
			  this.boxOfficeLoading = false;
		        setTimeout(function(){
		          ﻿uni.hideLoading()
		        }, 800);
		    })
		    .catch(err => {
		        ﻿uni.hideLoading();
				this.boxOfficeLoading = false;
		      ﻿uni.showToast({
		        title: err,
		        icon: 'none',
		        duration: 2000
		      })
		    });
	  },
      changeSwitch(state){
		  this.active = state;
        ﻿uni.showLoading({
          title: '加载中',
          mask: true
        });
        this.boxOfficeLoading = true;
        if(state === 1){
          this.getCatchMovie();
        }
        else {
		  this.getInternetMovie();
        }
      },
      viewLoad(){
        this.bannerList= [];
        this.loadingEnd = {
          moduleOne: false,
          moduleTwo: false,
          moduleThree: false,
          moduleFour: false,
          moduleFive: false,
        };
        ﻿uni.showLoading({
          title: '加载中',
          mask: true
        });
        this.getBannerList();
        this.getProject();
        this.getInfoList();
        this.getHotComment();
      },
    },
    computed:{
      hideLoading(){
        if(this.loadingEnd.moduleOne && this.loadingEnd.moduleTwo && this.loadingEnd.moduleThree && this.loadingEnd.moduleFour && this.loadingEnd.moduleFive){
          setTimeout(function(){
            ﻿uni.hideLoading()
            }, 800)
        }
      }
    },
    onShareAppMessage(res){
      ﻿this.$common.share()
    },
    onLoad() {
      ﻿uni.showShareMenu({
        withShareTicket: true
      })
      this.viewLoad();
    },
    onShow(){
		this.active = 1;
      this.getCatchMovie();
    }
  }
</script>

<style scoped>
  .home{
    padding: 0 30rpx;
  }
  .swiper {
    width: 100%;
    font-size: 0;
    box-sizing: border-box;
    height: 369rpx;
    border-radius: 20rpx !important;
    overflow: hidden !important;
    transform: translateY(0);
  }

  .slide-image {
    display: block;
    height: 100%;
    width: 100%;
  }

  .card-cell {
    padding: 33rpx 0 49rpx 0;
    text-align: center;
  }
  .actor:after{
    content: ' , ';
  }

  .actor:last-child:after{
    content: '';
  }
  .image {
    margin: 0 auto;
    width: 134rpx;
    height: 133rpx;
    display: block;
  }
  .title{
    font-size:22rpx;
    font-weight:500;
    color:rgba(82,82,82,1);
    display: block;
    margin-top: -13rpx;
  }
  .project img {
    width: 100%;
  }
  .line{
    height:14rpx;
    background:rgba(247,247,247,1);
    border-radius:4rpx;
    margin: 0 0 10rpx;
  }
  .amusement{
    margin-bottom: 10rpx;
  }
  .sy-recommend{
    display: flex;
    margin: 30rpx 0 30rpx;
  }
  .sy-recommend-img{
    position: relative;
  }
  .sy-recommend-img>img{
    width: 202rpx;
    border-radius: 6rpx;
  }
  .sy-recommend-img-font{
    position: absolute;
    top: 6rpx;
    left: 6rpx;
    z-index: 2;
    font-size: 20rpx;
    color: #FFFFFF;
    transform: rotate(-45deg);
  }
  .sy-recommend-img-font+p{
    width: 0;
    height: 0;
    border-width: 40rpx;
    border-style: solid;
    border-color: transparent transparent #F05955 transparent;
    position: absolute;
    top: 0;
    left: 0;
    margin-left: -40rpx;
    margin-top: -40rpx;
    transform: rotate(-45deg);
  }
  .sy-recommend-content{
    margin-left: 45rpx;
    padding-top: 42rpx;
    width: 100%;
  }
  .sy-recommend-content>p:first-child{
    font-size: 30rpx;
    color: #323232;
    font-weight: 500;
    width: 50%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
  }
  .sy-recommend-content>p:nth-of-type(2){
    width: 65%;
    font-size: 24rpx;
    color: #494949;
    margin: 30rpx 0 28rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .sy-recommend-content>div{
    display: flex;
  }
  .sy-recommend-content>div>i{
    color: #F05955;
    margin-right: 8rpx;
    margin-top: 5rpx;
  }

  .sy-recommend-actor{
    font-size: 22rpx;
    color: #969696;
	width: 400rpx;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap
  }
  .sy-recommend-num{
    font-size: 20rpx;
    color: #F16561;
    margin-top: 12rpx;
  }
  .home-introduction{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: #494949;
    font-size: 24rpx;
    margin: 30rpx 0;
  }
</style>
